
$(function () {
    // 单例模式
    let bannerRender = (function () {
        // 获取变量 
        let $container = $('#container'),
            $wrapper = $('.wrapper'),
            $foucus = $('.focus'),
            $arrow = $('.arrow'),
            $arrowLeft = $('.left'),
            $arrowRight = $('.right'),
            $slideList = null,
            $foucusList = null,
            $img = null,
            $imgWidth = null,
            $imgHeight = null
        let step = 0, //记录索引值
            autotimer = null, //定时器id
            interval = 3000,
            speed = 200 //每次切换的时间 


        // 获取数据函数queryData
        let queryData = function () {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest()
                xhr.open('GET', 'json/banner.json', true)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        let data = JSON.parse(xhr.responseText) //json格式的字符串
                        // 拿到请求到到数据供resolve函数使用 这就是回调函数
                        resolve(data)
                    }
                }
                xhr.send(null)
                // 异步ajax
                $.ajax({
                    type: 'GET',
                    url: 'json/banner.json',
                    dataType: "json",//把获取的json字符串转为对象
                    async: true,//true异步
                    // 成功后执行的回调函数，data是从服务器获取的形参（是json对象）
                    success: data => resolve(data),
                    error: err => reject(err)
                    // success:reslove 等价
                    // error:reject

                })


            })
        }

        // 渲染数据 
        let bindHhml = function (data) {
            let slidestr = foucusstr = ''

            data.forEach(({ img, desc } = {}, index) => {
                slidestr += `<div class="slide"><img src="${img}" alt="${desc}"></div>`
                foucusstr += `<li class=${index == 0 ? 'active' : ''}></li>`
            })
            // 页面上有了html结构就获取对应dom元素
            $wrapper.html(slidestr)
            $foucus.html(foucusstr)
            $slideList = $('.slide')
            $foucusList = $('.focus li')
            $img = $('.slide').first().children()
            $imgWidth = $img.width()
            $imgHeight = $img.height()

            // 设置container宽度和高度 jq可以获取到高度 以后任何图片都可以了 
            // 这一步无效 宽高好像必须在css中设置
            // $container.css({ width: $imgWidth, height: $imgHeight })
        }

        // 自动轮播

        let autoMove = function () {
            step++
            // 边界判断
            step >= $slideList.length ? step = 0 : null

            $slideList.eq(step).stop().animate({ zIndex: 1, opacity: 1 }, speed, function () {
                $(this).siblings().css({ zIndex: 0, opacity: 0 })
                $foucusList.eq(step).addClass('active').siblings().removeClass('active')
            })
        }

        // 左右按钮显示和隐藏 关闭和开启定时器
        let handleContainer = function () {
            $container.mouseenter(function () {
                $arrow.toggle()
                clearInterval(autotimer)
            })
            $container.mouseleave(function () {
                $arrow.toggle()
                autotimer = setInterval(autoMove, interval)
            })
        }

        // 小圆点点击事件 给每个小圆点绑定点击事件点击跳到该图片 
        let handleFocus = function () {
            $foucusList.click(function () {
                step = $(this).index() //获取当前元素在兄弟中的位置 修改step值
                $slideList.eq(step).css({ zIndex: 1, opacity: 1 }).siblings().css({ zIndex: 0, opacity: 0 })
                $(this).addClass('active').siblings().removeClass('active')

            })
        }
        // 左右按钮点击事件
        $arrowRight.click(function () {
            autoMove()
        })

        $arrowLeft.click(function () {
            step--
            // 边界判断
            step <= 0 ? $slideList.length - 1 : null

            $slideList.eq(step).stop().animate({ zIndex: 1, opacity: 1 }, speed, function () {
                $(this).siblings().css({ zIndex: 0, opacity: 0 })
                $foucusList.eq(step).addClass('active').siblings().removeClass('active')
            })
        })


        return {
            init: function () {
                let promise = queryData()
                promise.then(data => { //一个data参数（）可以省略
                    //   数据绑定
                    bindHhml(data)
                }).then(() => {
                    autotimer = setInterval(autoMove, interval)

                }).then(() => {
                    handleContainer()
                    handleFocus()
                })
            }
        }
    })()
    bannerRender.init()
})